<template>
  <div class="box">
    <div class="userCard1">
      <!-- 用户头像 -->
      <div class="img">
        <!-- 头像框 -->
        <div class="img-border">
          <img :src="$store.state.home.userImage" style="width:160px;height:160px;border-radius: 50%;">
          <input @change="getImg" class="fileInput" type="file">
          {{ home.state }}
        </div>
      </div>
      <!-- 信息表单 -->
      <div class="fromGrid">
        <div class="infoItem">
          <!-- 用户名 -->
          <div class="AllInput">
            <div class="tips">
              用户名:
            </div>
            <!-- input框 -->
            <div>
              <el-input style="width: 300px;" v-model="state.userInfo.name" placeholder="Please input" />
            </div>
          </div>
          <!-- 性别 -->
          <div class="AllInput">
            <div class="tips">
              性别:
            </div>
            <!-- input框 -->
            <div>
              <el-input style="width: 300px;" v-model="state.userInfo.sex" placeholder="Please input" />
            </div>
          </div>
          <!-- 微信绑定 -->
          <div class="AllInput">
            <div class="tips">
              微信号:
            </div>
            <!-- input框 -->
            <div>
              <el-input disabled style="width: 300px;" v-model="state.userInfo.wechatId"
                placeholder="Please input"><template #append><span class="slot">绑定微信号</span></template></el-input>
            </div>
          </div>
          <!-- 邮箱绑定 -->
          <div class="AllInput">
            <div class="tips">
              邮箱:
            </div>
            <!-- input框 -->
            <div>
              <el-input disabled style="width: 300px;" v-model="state.userInfo.email"
                placeholder="Please input"><template #append><span class="slot">绑定邮箱</span></template></el-input>
            </div>
          </div>
        </div>
        <div class="infoItem">
          <!-- 员工号 -->
          <div class="AllInput">
            <div class="tips">
              员工号:
            </div>
            <!-- input框 -->
            <div>
              <el-input disabled style="width: 300px;" v-model="state.userInfo.workCode" placeholder="Please input" />
            </div>
          </div>
          <!-- 手机号绑定 -->
          <div class="AllInput">
            <div class="tips">
              手机号:
            </div>
            <!-- input框 -->
            <div>
              <el-input disabled v-model="state.userInfo.tel" style="width: 300px;" placeholder="Please input"><template
                  #append><span @click="bindPhone('phone')" class="slot">绑定手机号</span></template></el-input>
            </div>
          </div>
          <!-- 生日 -->
          <div class="AllInput">
            <div class="tips">
              生日:
            </div>
            <!-- input框 -->
            <div>
              <el-input style="width: 300px;" v-model="state.userInfo.birth" placeholder="Please input" />
            </div>
          </div>
          <!-- 地址 -->
          <div class="AllInput">
            <div class="tips">
              地址:
            </div>
            <!-- input框 -->
            <div>
              <el-input style="width: 300px;" v-model="state.userInfo.houseLocation" placeholder="Please input" />
            </div>
          </div>
        </div>
      </div>
      <!-- 保存按钮 -->
      <div class="sumbit">
        <el-button type="primary" @click="updata" class="ss">保存</el-button>
      </div>
      <!-- 遮罩层 -->
      <div v-show="state.hiden" class="hiden"></div>
      <!-- 右侧弹出卡片 -->
      <div class="flex-card" :class="state.hiden === true ? 'trans' : ''">
        <div class="icon">
          <i class="iconfont icon-cha" style="cursor:pointer;" @click="closeHiden"></i>
        </div>
        <!-- 手机验证 -->
        <div v-show="state.phoneHiden">
          <!-- 新手机号 -->
          <div class="newPhone" v-show="state.oldYz === false">
            <el-input v-model="state.newPhone" placeholder="请输入您的新手机号" />
          </div>
          <!-- 老手机号 -->
          <div v-show="state.oldYz">
            <el-input disabled v-model="state.userInfo.tel" placeholder="手机号" />
          </div>
          <!-- 验证码 -->
          <div class="oldYz" v-show="state.oldYz">
            <el-input v-model="state.Yz" placeholder="验证码"><template #append><span
                  @click="sendYz" style="cursor:pointer;">{{ state.yzText }}</span></template></el-input>
          </div>
        </div>
        <!-- 确认按钮 -->
        <div class="button">
          <el-button type="primary" @click="confirm">确认</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import { onMounted, reactive } from 'vue';
import getApi from '@/api/getApi';
import store from '@/store/index.js';
export default {
  setup() {
    const state = reactive({
      userInfo: {},
      hiden: false,
      phoneHiden: false,
      wechartHiden: false,
      emailHiden: false,
      oldYz: false,
      newPhone: '',
      Yz: '',
      code: '',
      yzText:'发送验证码',
      newImgFile:{}
    })
    onMounted(() => {
      getUserInfo()
    })
    // 根据存储名读取浏览器cookies中的本地缓存
    const getCookie = (cname) => {
      // 参数为存储名
      var name = cname + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0)
          return decodeURIComponent(c.substring(name.length, c.length));
      }
      return "";
    };
    // 获取用户信息
    const getUserInfo = () => {
      let headerobj = {
        Authorization: getCookie('token')
      }
      // 头像
      store.dispatch('getUrl')
      // getApi('/user/getImage', 'post', {}, headerobj).then((res) => {
      //   state.userImg = res.data.data
      // })
      // 获取当前用户信息
      getApi('/user/getById', 'post', {}, headerobj).then((res) => {
        state.userInfo = res.data.data
      })
    }
    // input框获取图片
    const getImg = (e) =>{
      const file = e.target.files[0]
      state.newImgFile = file
      let headerobj = {
        Authorization: getCookie('token')
      }
      // 文件额外处理，再做传给后端
      let formData = new FormData()
      formData.append('file', file)

      getApi('/user/updateImage','post',formData,headerobj).then((res)=>{
        if(res.data.code == 200){
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
        }
      }).then(()=>{
        getUserInfo()
      })
    }
    // 弹出重新绑定框
    const bindPhone = (e) => {
      state.hiden = true
      if (e === 'phone') {
        state.phoneHiden = true
        state.oldYz = true
      }
      // let headerobj = {
      //   Authorization: getCookie('token')
      // }
      // getApi('/account/sendCode','post',{tel:state.userInfo.tel},headerobj).then(()=>{

      // })
    }
    // 发送验证码
    const sendYz = () => {
      let headerobj = {
        Authorization: getCookie('token')
      }
      getApi('/account/sendCode', 'post', { tel: state.userInfo.tel }, headerobj).then((res) => {
        if (res.data.msg === 'success') {
          state.yzText = 120
          let ss = setTimeout(()=>{
            state.yzText = state.yzText - 1;
            if(state.yzText == 0){
              clearTimeout(ss)
              state.yzText = '发送验证码'
            }
          },120000)
          state.code = res.data.data
        }
      })
    }
    // 确认修改
    const confirm = () => {
      let headerobj = {
        Authorization: getCookie('token')
      }
      if (state.phoneHiden === true) {
        if (state.oldYz === true) {
          if (state.Yz === state.code) {
            state.oldYz = false
          }
          state.code = ''
        } else {
          getApi('/account/updateTel', 'post', { newTel: state.newPhone }, headerobj).then((res) => {
            if (res.data.code == 200) {
              ElMessage({
                message: '手机号绑定成功',
                type: 'success',
              })
              state.newPhone = ''
              state.hiden = false
              state.phoneHiden = false
              getUserInfo()
            }
          })
        }
      } else if (state.wechartHiden === true) {

      } else if (state.emailHiden === true) {

      }
    }
    // 关闭遮罩层
    const closeHiden = () => {
      state.hiden = false
    }
    // 更新无需更改绑定的表单数据
    const updata = () => {
      let obj = {}
      for (let key in state.userInfo) {
        if (key !== 'register' && key !== 'imageUrl' && key !== 'wechatId') {
          obj[key] = state.userInfo[key]
        }
      }
      let headerobj = {
        Authorization: getCookie('token')
      }
      getApi('/user/updateUser', 'post', obj, headerobj).then((res) => {
        if (res.data.code == 200) {
          getUserInfo()
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
        }
      }).then(()=>{
        store.dispatch('getName')
      })
    }
    // 
    return { state, bindPhone, closeHiden, sendYz, confirm, updata,getImg }
  },
  computed:{
    ...mapState(['home'])
  }
}
</script>

<style lang="less" scoped>
.box {
  padding: 20px 20px 20px 0px;
  box-sizing: border-box;

  .userCard1 {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 30px 50px 40px 50px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;

    .img {
      display: flex;
      justify-content: center;
      align-items: center;

      .img-border {
        display: flex;
        transform: translateX(-50%);
        position: relative;
        .fileInput{
          position: absolute;
          top: 0;
          left: 0;
          width: 160px;
          height: 160px;
          border-radius: 50%;
          opacity: 0;
          cursor: pointer;
        }
      }
    }

    .fromGrid {
      width: 80%;
      margin-top: 30px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 200px;

      .infoItem {
        .AllInput {
          margin-top: 20px;
          display: flex;
          justify-content: center;
          align-items: center;

          .tips {
            margin-right: 30px;
            width: 60px;
          }

          .slot {
            cursor: pointer;
          }
        }
      }
    }

    .sumbit {
      margin-top: 50px;
      display: flex;
      justify-content: center;

      .ss {
        margin-left: -150px;
      }
    }

    .hiden {
      transition: all 0.6s;
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(135, 135, 135, 0.275)
    }
  }

  .flex-card {
    transition: all 0.6s;
    position: fixed;
    right: -450px;
    top: 0;
    height: 100vh;
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;

    .icon {
      position: absolute;
      right: 30px;
      top: 30px;
    }

    .oldYz {
      margin-top: 30px;
    }

    .button {
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
  }

  .trans {
    transition: all 0.6s;
    transform: translateX(-450px);
  }
}
</style>